<template>
  <div>
    <el-drawer
      :visible.sync="drawerShow"
      :title="title"
      :destroy-on-close="true"
      custom-class="wxkj-drawer"
      size="500px"
    >
      <div v-if="drawerShow" class="drawer-content">
        <el-form ref="form" :model="form" :rules="rules" class="pl10 pr10" label-width="110px">



          <el-form-item label="企业LOGO" prop="enLogo">
            <div class="logo-wrap">

              <upload-cropper
                ref="uploadCropper"
                class="wrap"
                :return-obj="true"
                :enlarge="2"
                :init-img="enLogo"
                :tip-content="'只支持JPG格式,建议使用大小不要超过1000k、350*150像素的图片'"
                :fixed-number="[350,150]"
                @upload="getUploadImgId"
              />
            </div>
          </el-form-item>



          <div class="drawer-form-buttom-group">
            <el-button type="primary" :loading="waiting" @click="onSubmit('form')">{{ form.id?'保存':'保存' }}</el-button>
            <el-button @click="drawerShow = false">取消</el-button>
          </div>
        </el-form>
      </div>
    </el-drawer>


  </div>
</template>

<script>
  import { mapState } from 'vuex'
  import uploadCropper from '@/components/uploadCropper'


  import {blockDataAdd} from "@/api/block";
  export default {
    components: {

      uploadCropper
    },
    data() {

      return {
        drawerShow: false,
        title: '',
        rowData:null,

        form: {

          enLogo: ''

        },

        enLogo: '', // logo

        rules: {

          enLogo: [
            { required: true, message: '请上传企业LOGO' }
          ]

        },


        waiting: false
        // areaData: [],
        // tradeData: []
      }
    },
    watch: {
      drawerShow(bl) {
        if (!bl) {
          this.$refs.form.resetFields()

          this.enLogo = ''// 清空图片


        }
      }
    },
    computed: {

    },
     created() {

    },
    methods: {
      getUploadImgId(e) {
        this.$refs.form.clearValidate('enLogo')
        this.form.enLogo = e.fileId
      },
      show(rowData) {
        this.rowData=rowData;
        this.blockId = rowData.id
        this.form.enLogo = rowData.image
        this.enLogo =rowData.image_dictText
        // this.channelId=channelId;
        // this.listQuery.channelId=channelId;
        console.log('打开窗口 blockId:', this.blockId)
       // this.getList()
        this.dialogShow = true

        this.title = '替换企业LOGO'
        this.drawerShow = true
        return;

      },
      onSubmit() {
        console.log('submit2')

        const blocks = []
        const that = this
        let i = 0

        // console.log("您选择的数据："+row.id +" " +row.title,index);
        const b = this.rowData;
         b.image = this.form.enLogo
        // b.sequence = ++i

        blocks.push(b)


        // this.list[index].status=1;

        blockDataAdd(blocks).then(response => {
          if (response.code == '200') {
            this.$message({
              type: 'success',
              message: '成功!'
            })
          } else {
            this.$message({
              type: 'error',
              message: '失败!'
            })
          }

          // this.drawerShow = false
          this.$emit('refresh')
          this.drawerShow = false
        })
      },

      logoUpload(res, file) {
        if (res.code == 200) {
          this.$refs.form.clearValidate('enLogo')
          this.form.enLogo = res.result.fileId
          this.enLogo = URL.createObjectURL(file.raw)
          this.$refs['logo'].clearFiles()// 清空上传列表
        } else {
          this.$message.error('上传失败')
        }
      },

      tipsdialogShow() {
        this.tipsdialogVisible = true
      },


    }
  }
</script>

<style lang="scss" scoped>
  .form-title{
    margin: 15px 0 25px 0;
  }
  .logo-wrap{
    ::v-deep .el-upload{
      width: 175px;
      height: 75px;
      line-height: 73px;
    }
  }
  .upload-wrap{
    .hidBtn{
      ::after{
        display: block;
        content: "";
        clear: both;
      }
      ::v-deep .el-upload--picture-card{
        display:none;   /* 上传按钮隐藏 */
      }
    }
    .el-upload-list--picture-card::after{
      display: block;
      content: "";
      clear: both;
    }
    ::v-deep .el-upload-list--picture-card .el-upload-list__item{
      width: 100px;
      height: 100px;
      float: left;
      line-height: 98px;
      position: relative;
      .el-progress-circle{
        display: none !important;
      }
    }
    .uploader-item{
      width: 100px;
      height: 100px;
    }
    ::v-deep .el-upload{
      width: 100px;
      height: 100px;
      border: 1px dashed #d9d9d9;
      cursor: pointer;
      line-height: 98px;
      position: relative;
      border-radius: 6px;
      background: none;
      .uploader-item-icon {
        display: block;
        font-size: 28px;
        color: #8c939d;
        width: 98px;
        height: 98px;
        line-height: 98px;
        text-align: center;
      }
    }
    .tips{
      margin: 0;
      margin-top: 10px;
      line-height: 24px;
    }
  }
  .avatar {
    width: 98px;
    height: 98px;
    display: block;
  }
</style>
